<template>
  <div class="v-editor-diagramMap-relationCriterion g-jc-sb">
    <div class="g-flex-1 _list_scroll">
      <div class="g-pd-l-8 g-one-line">
        <span>
          {{ valueView }}
        </span>
      </div>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      style="line-height: 14px"
      class="g-pd-4 g-flex-0"
    >
      <div>
        <img
          src="statics/icons/app/iconmore.png"
          style="margin-right: 2px; width: 16px; height: 16px; object-fit: contain; cursor: pointer"
          @click="handleAdd"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { actionManager } from "@/action/ActionManager";
import { PropertyRow } from "../../types";
import { Ref, computed, inject } from "vue";
import { ActionKey } from "@/action/ActionKey";
import { SetDiagramMapRelationAction } from "@/modules/model/actions/model/SetDiagramMapRelationAction";
import { parseRC2Form } from "@/util/relationCriteria";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 显示关系选择
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const valueView = computed(() => {
  return parseRC2Form(props.row.value as string);
});

const handleAdd = () => {
  const action = actionManager.getAction(ActionKey.setDiagramMapRelation) as SetDiagramMapRelationAction;
  action?.run(props.row);
};
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-editor-diagramMap-relationCriterion {
  // height: 100%;
  ._selected {
    color: $theme-color;
  }
  ._list_scroll {
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  }
}
</style>
